// 引入变量和全局样式
@use "var.scss" as *;
@use "global.scss" as *;
.content-list {
    min-height: 18rem;
    padding: 0 0.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* 将子项水平居中 */
    .section-content {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        /* 将子项水平居中 */
    }
    .content-item {
        width: calc(25% - 1.25rem);
        /* 设置子项宽度，减去外边距 */
        margin: 0.6rem;
        /* 为了在子项之间创建间距 */
        border-radius: 0.25rem;
        box-shadow: 0 0 0.3125rem 0.0625rem rgba(0, 0, 0, 0.1);
        position: relative;
        height: 15rem;
        border-radius: 1.3rem;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        transition: box-shadow 0.3s, transform 0.3s;
        &:hover {
            box-shadow: 0 0 0.3125rem 0.125rem rgba(0, 0, 0, 0.3);
            transform: scale(1.1);
        }
        @media screen and (max-width: 768px) {
            width: 100%;
            /* 移动端每行只显示一个，宽度 100% */
            margin: 1rem;
            /* 使用相对单位 rem */
            max-height: 30rem;
            /* 设置最大高度 */
        }
    }
}

.tag-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
            to bottom,
            rgba(102, 100, 100, 0.096),
            rgba(243, 239, 239, 0.767)
        ),
        url("https://static.linhaojun.top/aurora/articles/f7963a082ffe11e411b1514e4c35337c.jpg")
            center center no-repeat;
    background-size: cover;
    transition: opacity 0.3s ease-in-out;
}

.tag-image h2 {
    margin: 0;
    /* 重置默认的 margin，以确保没有额外的间距 */
}
